<script setup lang="tsx">
defineOptions({
  name: "pmTaskDetail"
});

import { ref, computed } from "vue";
import commonTable from "@/views/common/components/commonTable/index.vue";
import { mapPMJobBasicInfoData, tableCloumns, tableCloumns2 } from "./utils";
import ReTableTag from "@/components/ReTableTag";
import { tagMapOption } from "../hooks.tsx";

interface Props {
  data: Record<string, any>;
}

const props = withDefaults(defineProps<Props>(), { data: () => null });

const dialogVisible = defineModel({ type: Boolean, default: false });
const contentBoxTableRef = ref<HTMLElement | null>(null);
const commonTableRef = ref<CommonTable.TableRefType>(null);
const commonTableRef2 = ref<CommonTable.TableRefType>(null);

const pmJobBasicInfoData = computed(() => mapPMJobBasicInfoData(props.data));

const headerCellStyleFn = ({ row, column, rowIndex, columnIndex }: CommonTable.CellType): Record<string, string> => {
  const style = {};
  if (columnIndex === 5) {
    style["text-align"] = "center";
  }
  return style;
};
</script>

<template>
  <px-dialog v-model="dialogVisible" width="1200px">
    <template #title>
      <div class="detail-dialog-title">
        <div v-if="data?.title" class="title-name">{{ data?.title }}</div>
        <ReTableTag
          v-if="data?.planDetail?.planStatus"
          defaultValue="PROCESSING"
          :value="data?.planDetail?.planStatus"
          :label="data?.planDetail?.planStatusName"
          :option="tagMapOption"
        />
        <!-- <div v-if="data?.planDetail?.planStatus" :class="['title-status', `s-${data?.planDetail?.planStatus?.toLowerCase()}`]">
          {{ data?.planDetail?.planStatus }}
        </div> -->
        <div class="title-eqpId">{{ `EQP ID：${data?.planDetail?.eqpId}` }}</div>
      </div>
    </template>
    <px-scrollbar height="600px">
      <div class="detail-dialog-content">
        <div class="content-label">PM Job Basic Info</div>
        <div class="content-box">
          <px-descriptions class="base-info-table" :column="4" border>
            <px-descriptions-item
              v-for="item in pmJobBasicInfoData"
              :key="item.key"
              :label="item.label"
              :span="1"
              label-class-name="base-info-table-item-label"
            >
              <span>{{ item.value || "--" }}</span>
            </px-descriptions-item>
          </px-descriptions>
        </div>
        <div class="content-label">PM Job Notes</div>
        <div ref="contentBoxTableRef" class="content-box">
          <commonTable
            ref="commonTableRef"
            indexNeed
            :imageSize="50"
            :pagination="false"
            :tableCloumns="tableCloumns"
            :maxHeight="220"
            :list="data?.notes"
          />
        </div>
        <div class="content-label">Link Child PM Plan</div>
        <div ref="contentBoxTableRef" class="content-box">
          <commonTable
            ref="commonTableRef2"
            indexNeed
            :imageSize="50"
            :pagination="false"
            :tableCloumns="tableCloumns2"
            :maxHeight="300"
            :list="data?.planDetail?.children"
            :header-cell-style="headerCellStyleFn"
          />
        </div>
      </div>
    </px-scrollbar>
  </px-dialog>
</template>

<style lang="scss" scoped>
.detail-dialog-title {
  display: flex;
  gap: 12px;
  align-items: center;
  font-weight: 600;

  .title-name {
    font-size: 18px;
    font-weight: 600;
    line-height: 1;
    color: #555;
  }

  .title-status {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px 10px;
    font-size: 14px;
    line-height: 1;
    border-radius: 4px;
  }

  .s-processing {
    color: #00cb78;
    background-color: #d0f7e7;
  }

  .s-inactive {
    color: #909399;
    background-color: #e9e9eb;
  }

  .s-waiting {
    color: #f59e0b;
    background-color: #fde68a;
  }

  .title-eqpId {
    font-size: 14px;
    color: #666;
  }
}

:deep(.base-info-table-item-label) {
  width: 120px;
}

.detail-dialog-content {
  padding-right: 10px;

  .content-label {
    margin: 24px 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    color: #555;

    &:first-of-type {
      margin-top: 8px;
    }
  }
}
</style>
